<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 移动盒子的位置三种方式：定位   盒子的外边距  2D转换移动 */
        .move {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 沿着x轴向右移动100px，沿着y轴向下移动100px */
            /* transform: translate(100px, 100px); */
        }

        /* 旋转 */
        .rot {
            width: 100px;
            height: 100px;
            background-color: blue;
            transform: rotate(45deg);
        }
        /* 改变旋转点 */
        .to {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
            transition: all 1s;
            /* 设置旋转点 */
            transform-origin: left bottom;
        }
        .to:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <!-- 
        转换( transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
        
        转换(transform )你可以简单理解为变形

        移动: translate
        旋转: rotate
        缩放: scale

     -->

     <!-- 
        4.2 2D转换之移动translate

        2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

        1.语法

            transfom: translate(x,y);
            
            或者分开写
            
            transform: translatex(n) ;
            transform: translateY(n) ;

         2.重点

            1.定义2D转换中的移动，沿着X和Y轴移动元素
            2.translate最大的优点:不会影响到其他元素的位置
            3.translate中的百分比单位是相对于自身元素的translate:(50%,50%);
            4.translate对行内标签没有效果

      -->
      <div class="move"></div>

      <!-- 
        4.32D转换之旋转rotate

        2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

        1.语法

        transform:rotate(度数)

        2.重点
        
        rotate里面跟度数，单位是deg 比如rotate(45deg)  deg就是度
        角度为正时，顺时针，负时，为逆时针
        默认旋转的中心点是元素的中心点

       -->
       <div class="rot"></div>

       <!-- 
        4.4 2D转换中心点transform-origin

        我们可以设置元素转换的中心点

        1.语法

        transform-origin: x y;

        2.重点

        注意后面的参数×和y用空格隔开
        x y默认转换的中心点是元素的中心点(50%, 50%)
        还可以给x y设置像素或者方位名词( top bottom left right center )

        -->

        <div class="to"></div>

        <!-- 
            4.52D转换之缩放scale

            缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

            1.语法
            transform: scale(x,y);
            
            2.注意
            
            注意其中的x和y用逗号分隔
            transform:scale(1,1):宽和高都放大一倍，相对于没有放大
            transform:scale(2,2)︰宽和高都放大了2倍
            transform:scale(2)∶只写一个参数，第二个参数则和第一个参数一样，相当于scale(2，2)
            transform:scale(0.5,0.5):缩小
            sacle缩放最大的优势﹔可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

         -->
</body>
</html>